<template>
    <div class="bg-fa of total">
        <el-container style="height: 800px;  solid #eee">
            <el-aside width="200px" style="position: relative;top: 5%;background-color: white">
                <el-menu default-active="1">
                    <el-menu-item index="1" @click="currentMenu=1">
                        <template slot="title">
                            <i class="el-icon-film"></i>我的课程
                        </template>
                    </el-menu-item>
                    <el-menu-item index="2" @click="currentMenu=2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>我的班级
                        </template>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <!-- /课程列表 开始 -->
                    <section class="container" v-if="currentMenu===1">
                        <header class="comm-title">
                            <h2 class="fl tac">
                                <span class="c-333">全部课程</span>
                            </h2>
                        </header>
                        <section class="c-sort-box">
                            <div class="mt40">
                                <!-- /无数据提示 开始-->
                                <section class="no-data-wrap" v-if="courseMenu.total===0">
                                    <em class="icon30 no-data-ico">&nbsp;</em>
                                    <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                                </section>
                                <!-- /无数据提示 结束-->
                                <article class="comm-course-list">
                                    <ul class="of" id="bna">
                                        <li v-for="course in courseMenu.courses" :key="course.id">
                                            <div class="cc-l-wrap">
                                                <section class="course-img">
                                                    <img
                                                        :src="course.cover"
                                                        class="img-responsive"
                                                        :alt="course.title"
                                                        style="width:100%;height:180px"
                                                    />
                                                    <div class="cc-mask">
                                                        <a
                                                            :href="'/course/'+course.id"
                                                            :title="course.title"
                                                            class="comm-btn c-btn-1"
                                                        >开始学习</a>
                                                    </div>
                                                </section>
                                                <h3 class="hLh30 txtOf mt10">
                                                    <a
                                                        :href="'/course/'+course.id"
                                                        :title="course.title"
                                                        class="course-title fsize18 c-333"
                                                    >{{course.title}}</a>
                                                </h3>
                                                <section class="mt10 hLh20 of">
                                                    <span class="fr jgTag bg-green">
                                                        <i
                                                            class="c-fff fsize12 f-fA"
                                                        >{{course.price===0?"免费":"付费"}}</i>
                                                    </span>
                                                    <span class="fl jgAttr c-ccc f-fA">
                                                        <i class="c-999 f-fA">{{course.buyCount}}人学习</i>
                                                        |
                                                        <i
                                                            class="c-999 f-fA"
                                                        >{{course.viewCount}}人浏览</i>
                                                    </span>
                                                </section>
                                            </div>
                                        </li>
                                    </ul>
                                </article>
                            </div>
                            <!-- 公共分页 开始 -->
                            <div>
                                <div class="paging">
                                    <el-pagination
                                        background
                                        layout="total, prev, pager, next"
                                        :total="courseMenu.total"
                                        :page-size="8"
                                        @current-change="handleCurrentChange1"
                                    ></el-pagination>
                                </div>
                            </div>
                            <!-- 公共分页 结束 -->
                        </section>
                    </section>
                    <!-- /课程列表 结束 -->

                    <!-- /课程列表 开始 -->
                    <section class="container" v-if="currentMenu===2">
                        <header class="comm-title">
                            <h2 class="fl tac">
                                <span class="c-333">全部班级</span>
                            </h2>
                        </header>
                        <section class="c-sort-box">
                            <div class="mt40">
                                <!-- /无数据提示 开始-->
                                <section class="no-data-wrap" v-if="classMenu.total===0">
                                    <em class="icon30 no-data-ico">&nbsp;</em>
                                    <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                                </section>
                                <!-- /无数据提示 结束-->
                                <article class="comm-course-list">
                                    <ul class="of" id="bna">
                                        <li
                                            v-for="classroom in classMenu.classrooms"
                                            :key="classroom.id"
                                        >
                                            <div class="cc-l-wrap">
                                                <section class="course-img">
                                                    <img
                                                        :src="classroom.cover"
                                                        class="img-responsive"
                                                        :alt="classroom.name"
                                                        style="width:100%;height:180px"
                                                    />
                                                    <div class="cc-mask">
                                                        <a
                                                            :href="'/classroom/'+classroom.id"
                                                            :title="classroom.name"
                                                            class="comm-btn c-btn-1"
                                                        >进入班级</a>
                                                    </div>
                                                </section>
                                                <h3 class="hLh30 txtOf mt10">
                                                    <a
                                                        :href="'/classroom/'+classroom.id"
                                                        :title="classroom.name"
                                                        class="course-title fsize18 c-333"
                                                    >{{classroom.name}}</a>
                                                </h3>
                                                <section class="mt10 hLh20 of">
                                                    <span class="fr jgTag bg-green">
                                                        <i
                                                            class="c-fff fsize12 f-fA"
                                                        >{{classroom.price===0?"免费":"付费"}}</i>
                                                    </span>
                                                </section>
                                            </div>
                                        </li>
                                    </ul>
                                </article>
                            </div>
                            <!-- 公共分页 开始 -->
                            <div>
                                <div class="paging">
                                    <el-pagination
                                        background
                                        layout="total, prev, pager, next"
                                        :total="classMenu.total"
                                        :page-size="8"
                                        @current-change="handleCurrentChange2"
                                    ></el-pagination>
                                </div>
                            </div>
                            <!-- 公共分页 结束 -->
                        </section>
                    </section>
                    <!-- /课程列表 结束 -->
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { pageCourseOfUser } from "@/api/course/course";
import classApi from "@/api/course/classroom";
import cookie from "js-cookie";
export default {
    data() {
        return {
            courseMenu: {
                total: 0,
                current: 1,
                courses: [],
            },
            classMenu: {
                total: 0,
                current: 1,
                classrooms: [],
            },

            currentMenu: 1,
        };
    },
    computed: {},
    watch: {},
    methods: {
        handleCurrentChange1(val) {
            this.pageCourseOfUser(val);
        },

        pageCourseOfUser(page = 1) {
            return new Promise((resolve) => {
                this.courseMenu.current = page;
                var token = cookie.get("edu_token");
                if (!token) {
                    this.$confirm("请先登录", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            window.location.href = "/login";
                        })
                        .catch(() => {});
                } else {
                    pageCourseOfUser(this.courseMenu.current, 8).then(
                        (response) => {
                            this.courseMenu.courses = response.data.courses;
                            this.courseMenu.total = response.data.rows;
                        }
                    );
                }
                resolve();
            });
        },

        pageClassOfUser(page = 1) {
            this.classMenu.current = page;
            var token = cookie.get("edu_token");
            if (!token) {
                this.$confirm("请先登录", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        window.location.href = "/login";
                    })
                    .catch(() => {});
            } else {
                classApi
                    .getUserClass(this.classMenu.current, 8)
                    .then((response) => {
                        this.classMenu.total = response.data.rows;
                        this.classMenu.classrooms = response.data.classrooms;
                        console.log(this.classMenu);
                    });
            }
        },

        handleCurrentChange2(val) {
            this.pageClassOfUser(val);
        },
    },
    created() {},
    mounted() {
        this.pageCourseOfUser().then(() => {
            this.pageClassOfUser();
        });
    },
};
</script>

<style scope>
.el-aside {
    color: #333;
}
.total {
    position: relative;
    left: 10%;
    top: 5%;
    background-color: white;
}
</style>